<template>
    <div class="mod-category">
        <el-form :inline="true" :model="dataForm">
            <el-form-item label="手机号:">
                <el-input v-model="dataForm.userPhone" placeholder="请输入手机号" clearable />
            </el-form-item>
            <el-form-item label="姓名:">
                <el-input v-model="dataForm.userName" placeholder="请输入姓名" clearable />
            </el-form-item>
            <el-form-item label="状态:">
                <el-select v-model="dataForm.status" clearable placeholder="请选择审核状态">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="日期选择:">
                <el-date-picker v-model="state.value" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="chaxun()">
                    查询
                </el-button>
                <el-button @click="clearDatas()">
                    清空
                </el-button>
            </el-form-item>
        </el-form>

        <el-table :data="state.consultationList" style="width: 100%">
            <el-table-column prop="userId" label="昵称" />
            <el-table-column prop="userName" label="姓名" />
            <el-table-column prop="vxPic" label="头像">
                <template #default="scope">
                    <img alt="" :src="scope.row.vxPic" style="width: 50px;height: 50px;">
                </template>
            </el-table-column>
            <el-table-column prop="userPhone" label="联系电话" />
            <el-table-column prop="remark" label="咨询内容" />
            <el-table-column prop="product" label="来源商品">
                <template #default="scope">
                    <img alt="" :src="scope.row.product.pic" style="width: 50px;height: 50px;"
                        @click="onDetails(scope.row)">
                    <div
                        style="width: 80px;  height: 20px;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;font-size: 12px;"
                        class="aaa"
                        @click="onDetails(scope.row)">
                        {{ scope.row.product.prodName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="scope">
                    <el-tag type="success" v-if="scope.row.status == 0">
                        已查看
                    </el-tag>
                    <el-tag type="warning" v-if="scope.row.status == 1">
                        未查看
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" />
            <el-table-column fixed="right" label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="onDetails(scope.row)">
                        查看
                    </el-button>
                    <el-button type="danger" @click="onDelete(scope.row.consultationId)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination :current-page="page.pageIndex" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize"
            :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle" />
        <!-- 弹窗, 新增 / 修改 -->
        <LookList v-if="state.lookListVisible" @refresh-data-list="getlist" ref="lookLists" />
    </div>
</template>

<script setup>
import { checkFileUrl, isAuth, treeDataTranslate } from '@/utils'
import { ElMessage, ElMessageBox } from 'element-plus'
import LookList from '../../../common/home/lookList.vue';

// 明确初始化dataForm的属性
const dataForm = ref({
    userPhone: '',
    userName: '',
    status: '',
    startTime: '',
    endTime: '',
    logo: ''
});
const options = [
    {
        value: 0,
        label: '已查看'
    },
    {
        value: 1,
        label: '未查看'
    }
];

onMounted(() => {
    getProdConsultationList();
});

const clearDatas = () => {
    dataForm.value.userPhone = '';
    dataForm.value.userName = '';
    dataForm.value.status = '';
    dataForm.value.startTime = '';
    dataForm.value.endTime = '';
    dataForm.value.logo = '';
    state.value=''
    getProdConsultationList()
};
const page = reactive({
    total: 0, // 总页数
    currentPage: 1, // 当前页数
    pageSize: 10 // 每页显示多少条
});

/**
 * 每页数
 * @param val
 */
const sizeChangeHandle = (val) => {
    page.pageSize = val;
    page.currentPage = 1;
    getProdConsultationList();
};

/**
 * 当前页
 * @param val
 */
const currentChangeHandle = (val) => {
    page.currentPage = val;
    getProdConsultationList();
};

const state = reactive({
    consultationList: [],
    lookListVisible: false,
    value: ''
});

const formatDate = (date) => {
    const year = date.getFullYear();
    const month = (date.getMonth() + 1).toString().padStart(2, '0');
    const day = date.getDate().toString().padStart(2, '0');
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    const seconds = date.getSeconds().toString().padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const chaxun = () => {
    if (state.value && state.value[0] && state.value[1]) {
        dataForm.value.endTime = formatDate(state.value[1]);
        dataForm.value.startTime = formatDate(state.value[0]);
        console.log(dataForm.value);
        getProdConsultationList();
    } else {
        getProdConsultationList();
    }
};

/**
 * 获取数据列表
 */
const getProdConsultationList = () => {
    dataForm.value.logo = '';
    http({
        url: http.adornUrl('/prodConsultation/getProdConsultationList?current=' + page.currentPage + '&pageSize=' + page.pageSize),
        method: 'post',
        data: dataForm.value
    })
      .then((res) => {
            console.log(res);
            page.total = res.data.total;
            state.consultationList = res.data.records;
        })
      .catch((error) => {
            ElMessage({
                type: 'error',
                message: '获取产品咨询列表失败，请稍后重试。',
                duration: 1500
            });
            console.error('请求出错：', error);
        });
};


/**
 * 新增 / 修改
 * @param id
 */
const lookLists = ref(null);
const onDetails = (obj) => {
    state.lookListVisible = true;
    nextTick(() => {
        lookLists.value?.init(obj);
    });
};

/**
 * 删除
 * @param id
 */
const onDelete = (ids) => {
    ElMessageBox.confirm('确定进行删除操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    })
      .then(() => {
            http({
                url: http.adornUrl('/prodConsultation/delete/' + ids),
                method: 'get',
            })
              .then(() => {
                    ElMessage({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                    })
                      .then(() => {
                            getProdConsultationList();
                        });
                })
              .catch((error) => {
                    ElMessage({
                        type: 'error',
                        message: '删除操作失败，请稍后重试。',
                        duration: 1500
                    });
                    console.error('请求出错：', error);
                });
        });
};

</script>

<style lang="scss" scoped>
.mod-category {
    img {
        height: 80px;
        width: 200px;
    }
}
</style>